/*
 * @Author: your name
 * @Date: 2021-12-12 22:06:25
 * @LastEditTime: 2022-04-10 21:10:36
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /visualNotes/src/modules/ToolsList/components/toolItem.tsx
 */
import React from "react";
import { useHistory } from "react-router-dom";
import style from "./index.module.less";
interface IProps {
  title: string;
  desc: string;
  router?: string;
  bgImg?: string;
}
const ToolItem = (props: IProps) => {
  function getUuid() {
    return 'xxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = (Math.random() * 16) | 0,
        v = c === 'x' ? r : (r & 0x3) | 0x8;
      return v.toString(16);
    });
  }
  const history = useHistory();
  const { title, desc, router, bgImg } = props;
  return (
    <div
      className={style.itemContainer}
      onClick={() =>{
        var ID  =  getUuid();
        console.log(ID);
        history.push(router +'/'+ID);
      } }
    >
      <div>
        <div className={style.title}>{title}</div>
        <div className={style.desc}>{desc}</div>
        <div
          style={{ backgroundImage: `url(${bgImg ?? ""})` }}
          className={style.bgImg}
        ></div>
      </div>
    </div>
  );
};
export default ToolItem;
